<template>
    <div>
        <div class="ant-card-container-add">
            <a-button type="primary" @click="onClickAdd" v-if="addShow">
                新增
            </a-button>
            <slot name="button" />
        </div>
        <a-table
            ref="aTable"
            :columns="cloumnData"
            :dataSource="data"
            :pagination="pagination"
            :rowKey="rowKey"
            :rowSelection="rowSelection"
            :scroll="{ x: actionFixed ? 1500 : '100%' }"
            @change="onChange"
        >
            <template v-for="item in slots" :slot="item" slot-scope="text, record">
                <slot :name="item" :text="text" :record="record" />
            </template>
            <template slot="action" slot-scope="text, record, key">
                <a-button type="link" @click="onClickEdit(record)" v-if="editShow">
                    编辑
                </a-button>
                <a-button type="link" class="del" @click="onClickDel(record)" v-if="delShow">
                    删除
                </a-button>
                <slot name="action" :record="record" :k="key" />
            </template>
        </a-table>
        <ModalForm
            v-if="formColumns"
            :title="formTitle"
            :visible.sync="visible"
            :ok="onClickSave"
            :columns="formColumns"
            :data.sync="form"
            :rules="rules"
            :label-span="0"
            :wrapper-span="12"
            layout="vertical"
        />
        <Modal :title="`删除${title}`" :visible.sync="delVisible" :ok="onClickConfirmDel">
            <span>确认删除此数据?</span>
        </Modal>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        addShow: {
            type: Boolean,
            default: true
        },
        editShow: {
            type: Boolean,
            default: true
        },
        delShow: {
            type: Boolean,
            default: true
        },
        columns: {
            type: Array,
            default: () => []
        },
        loadData: {
            type: Function,
            default: async params => {
                return {}
            }
        },
        delData: {
            type: Function,
            default: async params => params
        },
        editData: {
            type: Function,
            default: async params => params
        },
        addData: {
            type: Function,
            default: async params => params
        },
        changeData: {
            type: Function,
            default: async params => params
        },
        search: {
            type: Object,
            default: () => {}
        },
        ids: {
            type: Array,
            default: null
        },
        list: {
            type: Array,
            default: null
        },
        custom: {
            type: Boolean,
            default: true
        },
        formColumns: {
            type: Object,
            default: null
        },
        rules: {
            type: Object,
            default: () => {}
        },
        rowSelection: {
            type: Object,
            default: () => {}
        },
        actionFixed: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            data: [],
            pagination: {
                current: 1,
                pageSize: 10,
                size: 'small',
                hideOnSinglePage: false,
                pageSizeOptions: ['10', '20', '30'],
                showQuickJumper: false,
                showSizeChanger: true,
                total: 0,
                showTotal: (total, range) => {
                    return '总共' + total + '条'
                }
            },
            action: [],
            slots: [],
            render: false,
            cloumnData: [],
            delVisible: false,
            visible: false,
            edit: false,
            formTitle: '新增',
            form: {}
        }
    },
    created() {
        if (this.custom) {
            const action = {
                dataIndex: 'action',
                title: '操作',
                align: 'center',
                scopedSlots: { customRender: 'action' }
            }
            if (this.actionFixed) {
                action.fixed = 'right'
                action.width = 140
            }
            this.cloumnData = [...this.columns, action]
        } else {
            this.columnData = this.columns
        }
        this.getList()
    },
    mounted() {
        this.slots = Object.keys(this.$scopedSlots).filter(key => typeof this.$scopedSlots[key] === 'function')
    },
    watch: {
        search: {
            handler() {
                this.changeSearch()
            },
            deep: true
        }
    },
    methods: {
        async getList() {
            if (this.list) {
                this.data = this.list
                return
            }
            const params = {
                ...this.search,
                page: this.pagination.current,
                limit: this.pagination.pageSize
            }
            const res = await this.loadData(params)
            const {
                data: { data, total }
            } = res
            this.data =
                data.map(items => {
                    items.editable = false
                    return items
                }) || []
            this.pagination.total = total || 0
        },
        onChange(pagination) {
            this.pagination = pagination
            this.getList()
        },
        initPagination() {
            this.pagination.current = 1
        },
        changeSearch() {
            this.initPagination()
            this.getList()
        },
        onChangeSelection(items) {
            this.$emit('update:ids', items)
        },
        rowKey(items) {
            return items.id
        },
        onClickEdit(items) {
            this.visible = true
            this.edit = true
            this.formTitle = '编辑'
            this.form = items
            this.changeData(items, 'edit')
        },
        onClickAdd() {
            this.visible = true
            this.edit = false
            this.formTitle = '新增'
            this.form = {}
        },
        async onClickSave() {
            const form = await this.changeData(this.form)
            return new Promise(async (resolve, reject) => {
                let res
                if (this.edit) {
                    res = await this.editData(form)
                } else {
                    res = await this.addData(form)
                }
                this.$message.success(res.message)
                this.refresh()
                resolve()
            })
        },
        onClickDel(items) {
            this.delVisible = true
            this.form = items
            this.changeData(items)
        },
        async onClickConfirmDel() {
            const res = await this.delData(this.form)
            this.$message.success(res.message)
            this.refresh()
        },
        refresh() {
            this.getList()
        },
        setForm(key, value) {
            this.$set(this.form, key, value)
        },
        getData() {
            return this.data
        },
        setData(index, value) {
            this.$set(this.data, index, value)
        },
        popAndPushData(data) {
            for (let i = 0; i < data.length; i++) {
                this.data.pop()
            }
            this.data.push(...data)
        }
    }
}
</script>

<style lang="less" scoped>
.ant-card-container-add {
    .ant-btn + .ant-btn {
        margin-left: 15px;
    }
}
</style>
